<template>
  <div class="plugin-reports-pay">
    <t-row :gutter="20">
      <t-col :flex="1" v-for="item in pay" :key="item.id">
        <div class="bg-box">
          <t-statistic 
            :title="item.name" 
            :value="Number(total[item.id]?.m ?? 0)"
            :format="app.money.format" 
            :animation="animation"
            animation-start
          >
            <template #suffix>
              <t-tag variant="light" theme="primary" shape="round">
                <t-icon name="wallet" /> {{ total[item.id]?.c ?? 0 }}
              </t-tag>
            </template>
          </t-statistic>
        </div>
      </t-col>
      <t-col :flex="1">
        <div class="bg-box">
          <t-statistic 
            :title="plugin.t('pay.other')" 
            :value="Number(total[0]?.m ?? 0)" 
            :format="app.money.format" 
            :animation="animation"  
            animation-start
          >
            <template #suffix>
              <t-tag variant="light" theme="warning" shape="round">
                <t-icon name="wallet" /> {{ total[0]?.c ?? 0 }}
              </t-tag>
            </template>
          </t-statistic>
        </div>
      </t-col>
    </t-row>
    <Line :pay="pay" :list="list" :time="time" />
    <Table :pay="pay" :total="total" :list="list" :time="time" />
  </div>
</template>
<script setup>
  import { ref, watch } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import Line from './line.vue'
  import Table from './table.vue'

  const plugin = index.plugin
  const props = defineProps(['factory', 'data'])
  const animation = {
    valueFrom: 0,
    duration: 1000,
  }
  const factory = props.factory
  const pay = ref([])
  const total = ref({})
  const list = ref([])
  const time = ref([])

  // 拉取统计数据
  const onTotal = () => {
    pay.value = props.data.pay
    list.value = props.data.list
    total.value = props.data.data
    time.value = props.data.time ?? plugin.tm('info.month')
  }

  // 监听
  watch(props, () => {
    onTotal()
  })

  onTotal()
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-reports-pay{

  }
</style>